<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人介绍卡片</title>
    <style>
        /* 设置全局样式，定义字体、背景颜色和页面布局 */
        body {
            font-family: 'Arial', sans-serif; /* 使用无衬线字体，简洁清晰 */
            background-color: #f0f8ff; /* 浅蓝色背景，营造友好氛围 */
            display: flex; /* 使用 Flexbox 布局，使卡片居中 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            height: 100vh; /* 页面高度占满整个视窗 */
            margin: 0; /* 去掉页面默认边距 */
        }

        /* 卡片的基础样式 */
        .card {
            width: 350px; /* 固定卡片宽度，适合内容展示 */
            background-color: #fff; /* 白色背景，让内容清晰 */
            border-radius: 15px; /* 圆角边框，柔和视觉效果 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影，使卡片有立体感 */
            overflow: hidden; /* 隐藏溢出内容，确保边界一致 */
            text-align: center; /* 文本居中 */
            transition: transform 0.3s ease; /* 添加平滑缩放动画效果 */
        }

        /* 鼠标悬停时，卡片略微放大，增强交互体验 */
        .card:hover {
            transform: scale(1.05); /* 放大 5% */
        }

        /* 卡片头部样式 */
        .card-header {
            background-color: #6ac1d2; /* 蓝绿色背景，与整体风格协调 */
            color: #fff; /* 白色字体，与背景形成对比 */
            padding: 15px; /* 内边距，确保文字不贴边 */
            font-size: 1.8em; /* 字体大小，突出标题 */
            font-weight: bold; /* 加粗字体 */
        }

        /* 卡片主体内容样式 */
        .card-body {
            padding: 20px; /* 内边距，提供内容区域空间 */
        }

        /* 头像图片样式 */
        .profile-pic {
            width: 100px; /* 图片宽度 */
            height: 100px; /* 图片高度，确保是正方形 */
            border-radius: 50%; /* 圆形图片 */
            margin: 0 auto 15px; /* 居中图片并添加下方间距 */
            border: 4px solid #6ac1d2; /* 外边框，与卡片头部颜色一致 */
        }

        /* 文字信息样式 */
        .info {
            margin: 10px 0; /* 上下间距，分隔文字段落 */
            font-size: 1em; /* 正常字体大小，适合阅读 */
            color: #333; /* 深灰色字体，柔和且易读 */
        }

        /* 卡片底部样式 */
        .card-footer {
            background-color: #f7f7f7; /* 浅灰色背景，区分主体内容 */
            padding: 10px; /* 内边距，提供空间 */
            font-size: 0.9em; /* 较小的字体，用于次要信息 */
            color: #555; /* 中灰色字体，低调不抢眼 */
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="card-header">
            个人介绍
        </div>
        <div class="card-body">
            <img src="https://th.bing.com/th/id/R.fe6360807bbe42bda4cacf96a352b673?rik=3i%2fiUtAB3PjKfg&pid=ImgRaw&r=0&sres=1&sresct=1" alt="头像" class="profile-pic">
            <p class="info">🎂 我今年 <span class="highlight">8岁</span>，是个活泼好动的小朋友！</p>
            <p class="info">🏠 我住在 <span class="highlight">北京市</span>，家里有爸爸妈妈和一只可爱的猫咪。</p>
            <p class="info">📚 在学校里，我最喜欢的科目是 <span class="highlight">数学</span>，因为可以动脑筋解难题。</p>
            <p class="info">🎨 我的兴趣爱好是 <span class="highlight">画画、拼乐高</span>，有时候也喜欢写点小故事。</p>
            <p class="info">🎮 我最爱的游戏是 <span class="highlight">超级马里奥</span>，也喜欢玩益智类的小游戏。</p>
            <p class="info">✈️ 我梦想长大后可以成为一名 <span class="highlight">科学家</span>，发明有趣的东西！</p>
        </div>
        <div class="card-footer">
            希望能和你成为好朋友！😊
        </div>
    </div>
</body>
</html>
